<template>
  <div class="nav">
    <div class="bg"></div>
    <div class="login_box">
      <div class="login_box_left">
        <img src="../../assets/images/shouye.png" alt="" />
      </div>
      <div class="login_box_right">
        <div class="title">外小柒收银系统</div>
        <div class="form_box">
          <el-form
            ref="ruleFormRef"
            class="form"
            :model="ruleForm"
            :rules="rules"
            label-width="65px"
            status-icon
          >
            <el-form-item label="用户名" prop="account">
              <el-input v-model="ruleForm.account" keyboard="true" />
            </el-form-item>
            <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="password">
              <el-input
                type="password"
                v-model.trim="ruleForm.password"
                keyboard="true"
              />
            </el-form-item>
            <el-form-item label-width="13px">
              <el-checkbox class="myRedCheckBox" v-model="ruleForm.remember"
                >记住账号</el-checkbox
              >
            </el-form-item>

            <el-form-item label-width="0">
              <el-button
                color="#FD6013"
                class="btn"
                type="primary"
                @click="submitForm(ruleFormRef)"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <keyboard
      :transitionTime="'0.5s'"
      :maxQuantify="10"
      :showKeyboard="showKeyboard"
      @clickKey="clickKey"
      float
      :manyDict="manyDict"
      :singleDict="singleDict"
      @clickNumber="clickNumber"
      :blurHide="false"
    ></keyboard>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import router from "../../router";
import { login, init } from "../../api/user";
import { useUserStore } from "../../store/modules/user";
import { ElMessage } from "element-plus";
//获取地址参数
function getUrlKey(name) {
  return (
    decodeURIComponent(
      (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
        location.href
      ) || [, ""])[1].replace(/\+/g, "%20")
    ) || null
  );
}
if (getUrlKey("code")) {
  localStorage.setItem("code", getUrlKey("code"));
}

import keyboard from "../../components/keyboard/keyboardIndex.vue";
const showKeyboard = ref(false);
//点击键盘的值
const clickKey = (key) => {
  // console.log("key-->>",key);
};
//点击键盘时数字的值
const clickNumber = (key) => {
  // console.log("key-->>",key);
};
const manyDict = ref("dict/chowder.json");
const singleDict = ref("dict/baseDict.json");

const { saveUserInfo: save, saveToken } = useUserStore();

const ruleFormRef = ref();
const ruleForm = reactive({
  account: localStorage.getItem("account") || "",
  password: "",
  checked: false,
  code: "vX7kYhyEVqOcFWJn",
  remember: false,
});

const rules = reactive({
  account: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在3~5位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 20, message: "长度在3~5位", trigger: "blur" },
  ],
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (ruleForm.remember === true) {
        localStorage.setItem("account", ruleForm.account);
      } else {
        localStorage.removeItem("account");
      }

      const formData = {
        ...ruleForm,
        remember: ruleForm.remember ? 1 : 2,
      };

      try {
        const loginData = await login(formData);
        if (loginData.code === 1) {
          saveToken(loginData.data.token);
          try {
            const initData = await init();
            if (initData.code === 1) {
              save(initData.data);
              router.push("/cashier");
            }
          } catch (e) {
            console.log("error :>> ", e);
          }
        } else {
          ElMessage({
            type: "error",
            message: loginData.msg,
          });
        }
      } catch (e) {
        console.log("error :>> ", e);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: red;
  border-color: red;
}

.nav {
  width: 100vw;
  height: 100vh;
  background: #fef0ea;
  position: relative;

  .bg {
    width: 33.3vw;
    height: 100vh;
    background: #fd6013;
    position: absolute;
    left: 0;
    top: 0;
  }

  .login_box {
    display: flex;
    width: 65vw;
    height: 70vh;
    background: #ffffff;
    border-radius: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .login_box_left,
    .login_box_right {
      width: 100%;
      height: 100%;
      flex: 1;
    }

    .login_box_left {
      img {
        width: 100%;
        height: 100%;
        border-radius: 40px 0 0 40px;
      }
      // background: url("/images/shouye.png") no-repeat center center;
      // background-size: 100%;
      border-radius: 40px 0 0 40px;
    }

    .login_box_right {
      //display: flex;
      //flex-direction: column;

      .title {
        margin-top: 10vh;
        font-weight: bold;
        font-size: 3vw;
        color: #333333;
        letter-spacing: 0.5vw;
        text-align: center;
      }

      .form_box {
        padding: 5vw 5vw;

        .form {
          max-width: 600px;

          .myRedCheckBox {
            .is-bordered.is-checked {
              border-color: #ff0000;
            }

            .el-checkbox__input.is-checked + .el-checkbox__label {
              color: #ff0000;
            }

            .el-checkbox__input {
              &.is-checked .el-checkbox__inner,
              &.is-indeterminate .el-checkbox__inner {
                border-color: #ff0000;
                background-color: #ff0000;
              }

              &.is-focus .el-checkbox__inner {
                border-color: #ff0000;
              }
            }

            .el-checkbox__inner:hover {
              border-color: #ff0000;
            }
          }

          .btn {
            width: 100%;
            color: white;
            margin-top: 10vh;
          }
        }
      }
    }
  }
}
.keyDown {
  background: #2c3e50;
}
</style>
